<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件分析报表</title>



  <style>
    /* 样式部分保持不变，与之前相同 */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
      background-color: #f5f7fa;
    }

    .container {
      max-width: 1500px;
      margin: 0 auto;
    }

    h1 {
      color: #333;
      text-align: center;
      margin-bottom: 30px;
    }

    .filter-section {
      margin-bottom: 20px;
      padding: 15px;
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .chart-container {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      margin-bottom: 30px;
    }

    .chart-box {
      flex: 1 1 45%;
      min-width: 400px;
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      padding: 15px;
    }

    .chart {
      width: 100%;
      height: 400px;
    }

    .data-table {
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      padding: 20px;
    }

    table {
      width: 100%;
      border-collapse: collapse;
    }

    th,
    td {
      padding: 12px 15px;
      text-align: left;
      border-bottom: 1px solid #ddd;
    }

    th {
      background-color: #f8f9fa;
      font-weight: bold;
    }

    tr:hover {
      background-color: #f5f5f5;
    }

    select {
      padding: 8px 12px;
      border-radius: 4px;
      border: 1px solid #ddd;
      font-size: 16px;
    }

    label {
      margin-right: 10px;
      font-weight: bold;
    }

    .loading {
      text-align: center;
      padding: 20px;
      font-size: 18px;
      color: #666;
    }
  </style>
</head>

<body>
  <div class="container">
    <h1>事件分析报表</h1>

    <div class="filter-section">
      <label for="monthFilter">选择月份:</label>
      <select id="monthFilter" onchange="filterByMonth()">
        <option value="ALL">全部月份</option>
        <option value="2025-09">2025年09月</option>
        <option value="2025-10">2025年10月</option>
        <option value="2025-11">2025年11月</option>
        <option value="2025-12">2025年12月</option>
      </select>

     
    </div>

    <div id="loading" class="loading">正在加载数据，请稍候...</div>

    <div id="content" style="display: none;">
      <div class="chart-container">
        <div class="chart-box">
          <h2>事件类别分布</h2>
          <div id="categoryChart" class="chart"></div>
        </div>

        <div class="chart-box">
          <h2>事件时间趋势</h2>
          <div id="timeChart" class="chart"></div>
        </div>
      </div>

      <div class="data-table">
        <h2>事件数据明细</h2>
        <table>
          <thead>
            <tr>
              <th>事件类别</th>
              <th>事件数量</th>
              <!-- <th>发生时间</th> -->
            </tr>
          </thead>
          <tbody id="eventTableBody">
            <!-- 数据将通过JS动态填充 -->
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <script src="../../../api/echarts.min.js"></script>
  <script src="../../../utils/utils.js"></script>
  <script src="../../../config/config.js"></script>
  <script src="../../../utils/wangeditor.js"></script>
  <script src="../../../utils/mixins.js"></script>
  <script src="../../../yl/vue.js"></script>
  <script src="../../../yl/index.js"></script>
  <script src="../../../yl/zh-cn.mjs"></script>
  <script src="../../../yl/index.iife.min.js"></script>
  <script src="../../../yl/jquery.min.js"></script>
  <script src="../../../utils/jquery.cookie.js"></script>
  <script src="../../../yl/jquery.easyui.min.js"></script>
  <script src="../../../yl/jquery.easyui.mobile.js"></script>
  <script src="../../../yl/moment.min.js"></script>
  <script src="../../../api/request.js"></script>

  <script>


    

    let allEventData = [];
    let allEventDatatimeChart = [];
    let currentEventData = [];
    let currentEventDatatimeChart = []
    let categoryChartInstance = null;
    let timeChartInstance = null;

    // 格式化日期
    function formatDate(dateStr) {
      const date = new Date(dateStr);
      return date.toLocaleDateString();
    }

    // 按月份筛选数据
    function filterByMonth() {
      const selectedMonth = document.getElementById('monthFilter').value;

      // if (selectedMonth === 'all') {
      //   currentEventData = [...allEventData];
      //   currentEventDatatimeChart = [...allEventDatatimeChart]
      // } else {
      //   currentEventData = allEventData.filter(item => {
      //     return item.time.startsWith(selectedMonth);
      //   });
      //   currentEventDatatimeChart = allEventDatatimeChart.filter(item => {
      //     return item.time.startsWith(selectedMonth);
      //   });
      // }

      // updateCharts();
      // fillTableData();

      fetchEventData(selectedMonth);
    }

    // 更新图表
    function updateCharts() {
      // 更新饼图
      const categoryOption = {
        series: [{
          data: currentEventData.map(item => ({
            value: item.count,
            name: item.category
          }))
        }]
      };
      categoryChartInstance.setOption(categoryOption);

      // 更新折线图
      const timeOption = {
        xAxis: {
          data: currentEventDatatimeChart.map(item => formatDate(item.time))
        },
        series: [{
          data: currentEventDatatimeChart.map(item => item.count)
        }]
      };
      timeChartInstance.setOption(timeOption);
    }

    // 初始化图表
    function initCharts() {
      // 事件类别饼图
      categoryChartInstance = echarts.init(document.getElementById('categoryChart'));
      const categoryOption = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: 10,
          top: 'center',
          data: allEventData.map(item => item.category)
        },
        series: [
          {
            name: '事件类别',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '18',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: currentEventData.map(item => ({
              value: item.count,
              name: item.category
            }))
          }
        ]
      };
      categoryChartInstance.setOption(categoryOption);

      // 事件时间趋势折线图
      timeChartInstance = echarts.init(document.getElementById('timeChart'));
      const timeOption = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: currentEventDatatimeChart.map(item => formatDate(item.time))
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '事件数量',
            type: 'line',
            data: currentEventDatatimeChart.map(item => item.count),
            smooth: true,
            lineStyle: {
              width: 4,
              color: '#5470C6'
            },
            itemStyle: {
              color: '#5470C6'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(84, 112, 198, 0.5)' },
                { offset: 1, color: 'rgba(84, 112, 198, 0.1)' }
              ])
            }
          }
        ]
      };
      timeChartInstance.setOption(timeOption);

      // 窗口大小变化时重新调整图表大小
      window.addEventListener('resize', function () {
        categoryChartInstance.resize();
        timeChartInstance.resize();
      });
    }

    // 填充表格数据
    function fillTableData() {
      const tableBody = document.getElementById('eventTableBody');
      tableBody.innerHTML = ''; // 清空现有数据

      currentEventData.forEach(item => {
        const row = document.createElement('tr');
        row.innerHTML = `
          <td>${item.category}</td>
          <td>${item.count}</td>
          
        `;
        // <td>${formatDate(item.time)}</td>
        tableBody.appendChild(row);
      });
    }

    // 获取数据
    function fetchEventData(type) {
      let lWhere = '';

      if (type == 'ALL') {
        lWhere = " and complaints.Row_Status ='0'"
      }
      else {
        lWhere = " and DATE_FORMAT(complaints.Create_Datetime, '%Y-%m')='" + type + "'"
      }

      $.ajax({
        headers: requestHeaders(),

        url: `${mh}/generalBusiness/generalQueryBySQLSerialNumber`,
        method: "post",
        data: {
          SQLSerialNumber: "SQL_complaints_Report",
          Condition: '',
          ExtensionCondition: window.btoa(unescape(encodeURIComponent(lWhere))),//,
        },
        success: (data) => {

          // 隐藏加载提示
          document.getElementById('loading').style.display = 'none';
          // 显示内容
          document.getElementById('content').style.display = 'block';

          // 处理获取到的数据
          allEventData = data;
          // [
          //   { category: '登录', count: 120, time: '2023-10-01' },
          //   { category: '注册', count: 85, time: '2023-10-02' },
          //   { category: '支付', count: 210, time: '2023-10-03' },
          //   { category: '浏览', count: 356, time: '2023-10-04' },
          //   { category: '收藏', count: 92, time: '2023-10-05' },
          //   { category: '分享', count: 45, time: '2023-10-06' },
          //   { category: '评论', count: 78, time: '2023-10-07' },
          //   { category: '登录', count: 110, time: '2023-11-01' },
          //   { category: '注册', count: 75, time: '2023-11-02' },
          //   { category: '支付', count: 190, time: '2023-11-03' },
          //   { category: '浏览', count: 320, time: '2023-11-04' },
          //   { category: '登录', count: 95, time: '2023-12-01' },
          //   { category: '注册', count: 60, time: '2023-12-02' },
          //   { category: '支付', count: 180, time: '2023-12-01 ' },
          // ];





          currentEventData = [...allEventData];



          $.ajax({
            headers: requestHeaders(),

            url: `${mh}/generalBusiness/generalQueryBySQLSerialNumber`,
            method: "post",
            data: {
              SQLSerialNumber: "SQL_complaints_ReportbyDay",
              Condition: '',
              ExtensionCondition: window.btoa(unescape(encodeURIComponent(lWhere))),
            },
            success: (databyday) => {
              allEventDatatimeChart = databyday;

              currentEventDatatimeChart = [...allEventDatatimeChart];
              // 初始化图表和表格
              initCharts();
              fillTableData();
            },
            complete: (XMLHttpRequest) => {
              requestPretreatment(XMLHttpRequest);
            },
            dataType: "json",


          })

        },
        complete: (XMLHttpRequest) => {
          requestPretreatment(XMLHttpRequest);
        },
        dataType: "json",


      })
    }

    // 页面加载完成后初始化
    window.onload = function () {
      // 先获取数据，数据获取成功后再初始化图表
      fetchEventData('ALL');
    };
  </script>
</body>

</html>